<template>
	<!-- 轮播图组件 -->
	<!-- <view :class="'bg-'+theme.backgroundColor"> -->
	<view class="ml32 mr32 mb32" :style="{height: `${(newData.height)}px`, marginBottom: `${newData.pageSpacing}px`}">
		<view v-show="newData.swiperType=='card-swiper'" :style="{height: `${(newData.height)}px`}"></view>
		<view class="swiper-card">
			<swiper class="screen-swiper" :style="{height: `${(newData.height)}px`}"
				:class="newData.dotStyle=='square-dot' ? 'square-dot' : 'round-dot'" :indicator-dots="true"
				:circular="true" :autoplay="true" :interval="newData.interval" duration="500" @change="cardSwiper"
				indicator-color="#cccccc" indicator-active-color="#ffffff">
				<swiper-item class="swiper-image" v-for="(item,index) in newData.swiperList" :key="index"
					:class="cardCur==index?'cur':''" @tap="jumpPage(item.pageUrl)"
					:style="{height: `${newData.height}px`}">
					<image :src="item.imageUrl" mode="scaleToFill" :style="{height: `${newData.height}px`}"></image>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import {
		pageUrls
	} from '../div-base/div-page-urls.js'
	export default {
		props: {
			value: {
				type: Object,
				default: function() {
					return {
						swiperType: 'screen-swiper',
						height: 150,
						interval: 3000,
						borderRadius: 0,
						imageSpacing: 0,
						swiperList: []
					}
				}
			}
		},
		components: {},
		data() {
			return {
				theme: app.globalData.theme, //全局颜色变量
				newData: this.value,
				cardCur: 0,
				pageUrls: pageUrls
			};
		},
		methods: {
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			jumpPage(page) {
				if (page) {
					if (this.pageUrls.tabPages.indexOf(page) != -1) {
						uni.switchTab({
							url: page
						});
					} else {
						uni.navigateTo({
							url: page
						});
					}
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.screen-swiper {
		min-height: 0 !important;
	}

	.swiper-card {
		background-color: #f7f7f7;
		border-radius: 20rpx 20rpx 0 0;
		padding: 10rpx 0;

	}

	.swiper-image {
		border-radius: 20rpx;
	}
</style>